<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Sandbox</title>
  <script>
    function rewriteEndpoint(ep) {
      var currentPath = window.location.pathname;
      var lastPlaygroundIndex = currentPath.lastIndexOf('/playground');

      if (lastPlaygroundIndex === -1) {
        return currentPath + ep;
      }

      var newPath = currentPath.substring(0, lastPlaygroundIndex);
      var relativeEndpoint = newPath + '/' + ep;
      relativeEndpoint = relativeEndpoint.replace(/\/+/g, '/');

      return relativeEndpoint;
    }

    var files = {};

    function handleFileSelect(event) {
      files = {};
      var fileInput = event.target;
      for (var i = 0; i < fileInput.files.length; i++) {
        var file = fileInput.files[i];
        var reader = new FileReader();
        reader.onload = (function (file) {
          return function (e) {
            var base64Content = btoa(e.target.result);
            files[file.name] = base64Content;
          };
        })(file);
        reader.readAsBinaryString(file);
      }
    }

    function submitCode() {
      var language = document.getElementById('language').value;
      var code = document.getElementById('code').value;
      var run_timeout = document.getElementById('run_timeout').value;
      var compile_timeout = document.getElementById('compile_timeout').value;

      var relativeEndpoint = rewriteEndpoint('/run_code');
      var xhr = new XMLHttpRequest();
      xhr.open('POST', relativeEndpoint, true);
      xhr.setRequestHeader('Content-Type', 'application/json');

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          // Handle the response from the server
          var response = JSON.parse(xhr.responseText);
          document.getElementById('output').textContent = JSON.stringify(response, null, 2);
          const compileStdout = response.compile_result?.stdout || ''
          const compileStderr = response.compile_result?.stderr || ''
          const runStdout = response.run_result?.stdout || ''
          const runStderr = response.run_result?.stderr || ''
          document.getElementById('compile-stdout').textContent = compileStdout;
          document.getElementById('compile-stderr').textContent = compileStderr;
          document.getElementById('run-stdout').textContent = runStdout;
          document.getElementById('run-stderr').textContent = runStderr;

        }
      };

      // Send the data as JSON
      var data = JSON.stringify({
        language: language,
        code: code,
        run_timeout: run_timeout,
        compile_timeout: compile_timeout,
        files: files
      });
      xhr.send(data);

      // Prevent form from submitting traditionally
      return false;
    }
  </script>
</head>

<body>

  <h1>Code Sandbox</h1>

  <form onsubmit="return submitCode();">
    <label for="language">Language:</label>
    <select id="language" name="language">
      <option value="python">Python</option>
      <option value="nodejs">NodeJS</option>
      <option value="cpp">C++</option>
      <option value="go">GoLang</option>
      <option value="java">Java</option>
      <option value="scala">Scala</option>
      <option value="csharp">C#</option>
      <option value="typescript">TypeScript</option>
      <option value="rust">Rust</option>
      <option value="lean">Lean</option>
      <option value="bash">Bash</option>
      <option value="pytest">pytest</option>
      <option value="go_test">go test</option>
      <option value="junit">JUnit</option>
      <option value="php">PHP</option>
      <option value="verilog">Verilog</option>
      <option value="jest">Jest</option>
      <option value="cuda">CUDA</option>
      <option value="lua">Lua</option>
      <option value="R">R</option>
      <option value="perl">Perl</option>
      <option value="D_ut">D ut</option>
      <option value="ruby">Ruby</option>
      <option value="julia">Julia</option>
      <option value="kotlin_script">Kotlin Script</option>
      <option value="swift">Swift</option>
      <option value="racket">Racket</option>
      <option value="python_gpu">Python GPU</option>
    </select>

    <br />
    <label for="code">Code:</label>
    <textarea id="code" name="code" rows="10" cols="50"></textarea>

    <br />
    <label for="run_timeout">Run Timeout (seconds):</label>
    <input type="number" id="run_timeout" name="run_timeout" value="10">

    <br />
    <label for="compile_timeout">Compile Timeout (seconds):</label>
    <input type="number" id="compile_timeout" name="compile_timeout" value="10">

    <br />
    <label for="files">Additional Files:</label>
    <input type="file" id="files" name="files" multiple onchange="handleFileSelect(event)">

    <br />
    <input type="submit" value="Submit">
  </form>

  <h2>Output:</h2>
  <pre id="output"></pre>

  <h3>compile stdout:</h3>
  <pre id="compile-stdout"></pre>

  <h3>compile stderr:</h3>
  <pre id="compile-stderr"></pre>

  <h3>run stdout:</h3>
  <pre id="run-stdout"></pre>

  <h3>run stderr:</h3>
  <pre id="run-stderr"></pre>

</body>

</html>